<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-dialog
          title="执行测试用例中"
          v-model="props.visible"
          width="95%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          @close="closeDialog()"
        >
          <el-table
            border
            v-loading="loading"
            :data="list"
            :cell-style="cellStyle"
          >
            <el-table-column
              label="case编号"
              prop="execContent.caseNumber"
              width="90px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.caseNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="用例描述"
              prop="execContent.caseDescribe"
              width="200px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.caseDescribe }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="是否执行"
              prop="execContent.isExecute"
              width="80px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.isExecute }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="库"
              prop="execContent.dbName"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.dbName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="表"
              prop="execContent.tableName"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.tableName }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="执行条件"
              prop="execContent.executeRequirement"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.executeRequirement }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="执行的数据"
              prop="execContent.execLorData"
              width="350px"
               :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <json-viewer
                  v-if="row.execContent.executeRequirement == 'URL_CALCULATE'"
                  copyable
                  theme="my-awesome-json-theme"
                  :expand-depth="1"
                  :value="row.execContent.execLorData"
                  style="height: 400px"
                ></json-viewer>

                <span v-else> {{ row.execContent.execLorData }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="期望结果"
              prop="execContent.expectedResults"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.expectedResults }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="实际结果"
              prop="execContent.actualResult"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.actualResult }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="对比结果"
              prop="execContent.compareResult"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-tag
                  type="success"
                  v-if="row.execContent.compareResult == 'pass'"
                  >{{ row.execContent.compareResult }}</el-tag
                >
                <el-tag
                  type="danger"
                  v-if="row.execContent.compareResult == 'fail'"
                  >{{ row.execContent.compareResult }}</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { tkTaskCaseApi } from "@/api/kernel/tk-task-case.js";
import { ElMessage } from "element-plus";

//# 行样式
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  console.log(11111111111111111);
  if (row.execContent.executeRequirement.includes("DELETE")) {
    return { backgroundColor: "#F8E6E0" };
  }
  if (row.execContent.executeRequirement === "GENERATE_ROWKEY") {
    return { backgroundColor: "#F3E2A9" };
  }
  if (row.execContent.executeRequirement === "URL_CALCULATE") {
    return { backgroundColor: "#CEE3F6" };
  }
  if (row.execContent.compareResult === "fail") {
    return { backgroundColor: "#e8816a" };
  }
};

const emits = defineEmits(["update:visible", "done"]);
const updateVisible = (value) => {
  emits("update:visible", value);
};

const props = defineProps({
  visible: Boolean,
  data: Object,
});
const loading = ref(false);

const list = ref([]);

const closeDialog = () => {
  clearTimer();
  updateVisible(false);
  emits("done");
};

onMounted(() => {
  params.value.caseId = props.data.id;
  params.value.caseName = props.data.caseName;
  caseExecuteStart();
  getExecuteList();
});
const params = ref({
  caseId: "",
  caseName: "",
});

//# 执行测试用例
const caseExecuteStart = () => {
  tkTaskCaseApi.caseExecuteStart(params.value);
};
//# 实时查看执行结果列表
let isFinish = ref(false);
let timer = ref(0);

const getExecuteList = () => {
  timer.value = setInterval(() => {
    tkTaskCaseApi.getExecuteResultIsFinish(params.value.caseId).then((res) => {
      isFinish.value = res.data;
    });
    if (isFinish.value) {
      ElMessage({
        showClose: true,
        message: "用例执行结束",
        type: "success",
      });
      clearTimer();
    } else {
      tkTaskCaseApi.getExecuteList().then((res) => {
        list.value = res.rows;
      });
    }
  }, 500);

  // setTimeout(() => {
  //   tkTaskCaseApi.getExecuteList((res) => {
  //     console.log(res + "========");
  //     // list.value = res.rows;
  //   });
  // }, 6000);
};

const clearTimer = () => {
  clearInterval(timer.value);
};
</script>
